import { Link, connect } from 'umi';

import { Avatar, Card, Col, Divider, Input, Row, Tag, Form, Dropdown, Menu, Modal, Button, message } from 'antd';
import { DownOutlined } from '@ant-design/icons'
import { GridContent } from '@ant-design/pro-layout';
import styles from './style.less'
import { useState } from 'react';
import { useEffect } from 'react';
import { getDefaultEnterpriseUrl, getDefaultAvatarUrl } from '@/utils/default'
import { AvatarUpload } from "@/components/Upload"
import EnterpriseUserSelect from '@/components/EnterpriseUserSelect'
import { saveEnterprise, saveEnterpriseOwn } from '@/services/enterprise'



const EnterpriseDetail = (props) => {
  const {
    dispatch,
    enterpriseInfo = {},
    enterpriseLoading = true
  } = props;
  const [form] = Form.useForm();
  const [enterpriseEditModalVisible, setEnterpriseEditModalVisible] = useState(false);
  const [enterpriseOwnerModalVisible, setEnterpriseOwnerModalVisible] = useState(false);
  const [initEnterpriseData, setInitEnterpriseData] = useState({});
  const [enterpriseId, setEnterpriseId] = useState()

  useEffect(() => {
    let enterpriseId = localStorage.getItem("enterpriseId");
    setEnterpriseId(enterpriseId);
    if (dispatch && enterpriseId) {
      dispatch({
        type: 'enterprise/getEnterpriseById',
        payload: enterpriseId
      })
    }
  }, [])

  useEffect(() => {
    setInitEnterpriseData({ ...enterpriseInfo })
  }, [enterpriseInfo])

  const saveEnterpriseInfo = async () => {
    let values = await form.validateFields();
    console.log(values)
    saveEnterprise(enterpriseId, values).then((success) => {
      if (success) {
        message.success("保存成功！")
        setEnterpriseEditModalVisible(false)
        dispatch({
          type: 'enterprise/getEnterpriseById',
          payload: enterpriseId
        })
      }
    })
  }

  const saveEnterpriseOwner = async () => {
    let values = await form.validateFields();
    console.log(values)
    saveEnterpriseOwn(enterpriseId,values).then((success) => {
      if (success) {
        message.success("保存成功！")
        setEnterpriseOwnerModalVisible(false)
        dispatch({
          type: 'enterprise/getEnterpriseById',
          payload: enterpriseId
        })
      }
    })
  }

  const menu = (
    <Menu>
      <Menu.Item>
        <a onClick={() => {
          setEnterpriseEditModalVisible(true)
        }}>编辑</a>
      </Menu.Item>
      <Menu.Item>
        <a onClick={() => {
          setEnterpriseOwnerModalVisible(true);
        }} >更换所有者</a>
      </Menu.Item>
      <Menu.Item>
        <Link to="/enterprise/manage">管理企业</Link>
      </Menu.Item>
    </Menu>
  );

  return (
    <GridContent>
      <Row gutter={24}>
        <Col xs={24} sm={24} lg={24} md={24}>
          <Card
            bordered={false}
            style={{
              marginBottom: 24,
            }}
            loading={enterpriseLoading}
          >
            {!enterpriseLoading && (
              <div >
                <div className={styles.infoEidtDrowdown}>
                  <Dropdown overlay={menu}>
                    <Button onClick={e => e.preventDefault()}>
                      编辑 <DownOutlined />
                    </Button>
                  </Dropdown>
                </div>
                <div className={styles.iconHolder}>
                  <img alt="" src={enterpriseInfo.icon || getDefaultEnterpriseUrl(enterpriseInfo.id)} />
                  <div className={styles.name}>{enterpriseInfo.name}</div>
                </div>
                <div className={styles.leader}>
                  <div className={styles.leaderTitle}>企业编码</div>
                  <div>{enterpriseInfo.code}</div>
                </div>
                <Divider
                  style={{
                    marginTop: 16,
                  }}
                  dashed
                />
                <div className={styles.leader}>
                  <div className={styles.leaderTitle}>企业描述</div>
                  <div>{enterpriseInfo.description}</div>
                </div>
                <Divider
                  style={{
                    marginTop: 16,
                  }}
                  dashed
                />

                <div className={styles.leader}>
                  <div className={styles.leaderTitle}>所有者</div>
                  {enterpriseInfo.ownUser && (<div>
                    <Avatar src={enterpriseInfo.ownUser.avatarUrl || getDefaultAvatarUrl(enterpriseInfo.ownUser.id)} />
                    {enterpriseInfo.ownUser.nickName || enterpriseInfo.ownUser.username}
                  </div>)}
                </div>
              </div>
            )}
          </Card>
        </Col>
      </Row>
      <Modal
        visible={enterpriseEditModalVisible}
        closable
        title={"修改企业信息"}
        onCancel={() => {
          form.resetFields();
          setEnterpriseEditModalVisible(false);
        }}
        destroyOnClose
        onOk={saveEnterpriseInfo}
      >
        <Form
          form={form}
          initialValues={initEnterpriseData}
        >

          <Form.Item
            label="名称"
            name="name"
            rules={[
              {
                required: true,
                message: "请填入名称",
              },
            ]}
          >
            <Input></Input>
          </Form.Item>
          <Form.Item
            label="图标"
            name="icon"
            rules={[
              {
                required: true,
                message: "请填入名称",
              },
            ]}
          >
            <AvatarUpload></AvatarUpload>
          </Form.Item>
          <Form.Item
            label="编码"
            name="code"
            rules={[
              {
                required: true,
                message: "请填入编码",
              },
            ]}
          >
            <Input></Input>
          </Form.Item>
          <Form.Item
            label="描述"
            name="description"
          >
            <Input.TextArea></Input.TextArea>
          </Form.Item>
        </Form>
      </Modal>
      <Modal
        visible={enterpriseOwnerModalVisible}
        closable
        title={"修改所有者"}
        onCancel={() => {
          form.resetFields();
          setEnterpriseOwnerModalVisible(false);
        }}
        destroyOnClose
        onOk={saveEnterpriseOwner}
      >
        <Form
          form={form}
          initialValues={initEnterpriseData}
        >
          <Form.Item
            label="所有人"
            name="userId"
            rules={[
              {
                required: true,
                message: "请填入所有人",
              },
            ]}
          >
            <EnterpriseUserSelect ismultiple={false} enterpriseId={enterpriseId} />
          </Form.Item>
        </Form>
      </Modal>
    </GridContent>
  );
}

export default connect(({ enterprise, loading }) => ({
  enterpriseInfo: enterprise.enterpriseInfo,
  enterpriseLoading: loading.effects['enterprise/getEnterpriseById'],
}))(EnterpriseDetail);
